<template class="diyi">
	<view>
		<view class="img">
			<u--image :showLoading="true" :src="detailList.pic" width="100%" height="750px"></u--image>
		</view>
		<u-divider></u-divider>
		<view>
			<u--text mode="price" :text="detailList.minPrice" color="#1ba784" size="83" margin="50" lineHeight="31"
				wordWrap="normal">
			</u--text>
			<u-divider></u-divider>
			<view class="box">
				<u--text text="价格" color="#969799" size="46" margin="20" lineHeight="36"></u--text>
				<u--text mode="price" :text="detailList.originalPrice" color="#969799" size="36" margin="20"
					lineHeight="36" decoration="line-through"></u--text>
			</view>
			<view class="shiwu">
				<u--text :text="detailList.name" color="#323233" size="39" margin="30" lineHeight="36"></u--text>
				<u--text class="doushi" :text="detailList.characteristic" color="#969799" size="33" margin="20"
					lineHeight="36"></u--text>
			</view>
			<view class="yuefei">
				<u--text :text="list.feeTypeStr" color="#969799" size="30" margin="20" lineHeight="36"></u--text>
				<u--text :text="list.feeType" color="#969799" size="30" margin="20" lineHeight="36" align="right"></u--text>
			</view>
			
			
			
			<view class="lingjuan">
				<u--text text="领劵" color="#323233" size="30" margin="20" lineHeight="36" @click="show3 = true" @open="open3" @close="close3" ></u--text>
				<u-icon name="arrow-right" size="30"></u-icon>
			</view>
			
			
			<view class="fuwu">
				<u--text text="服务" color="#969799" size="35" margin="30" lineHeight="36"></u--text>
				<u--text text=" 收货后结算 · 支持退款" color="#323233" size="35" margin="20" lineHeight="36"></u--text>
			</view>
			<view class="yuefei" @click="fn0">
				<u--text text="评价(5)" color="#969799" size="30" margin="20" lineHeight="36"></u--text>
				<u--text text="全部评价 " color="#969799" size="30" margin="20" lineHeight="36" align="right"></u--text>
				<u-icon name="arrow-right" size="30"></u-icon>
			</view>
			<view class="touxiang">
				<u--image class="tupian" width="80" height="80"
					src="https://dcdn.it120.cc/2022/01/31/ea90f530-4e4f-4a9b-a979-b39cd36429a5.jpg" shape="circle">
				</u--image>
				<u--text mode="name" text="jipengcheng" format="encrypt" size="32"></u--text>
				<u-rate :count="5" v-model="value" size="22" align="right"></u-rate>
			</view>
			<view class="xitong">
				<u--text class="doushi" text="系统默认好评 " color="#969799" size="28" margin="20" lineHeight="36"></u--text>
			</view>
			<view class="sahangpin">
				<u--text class="xieg" text="//////" color="#969799" size="15" margin="20" lineHeight="36"
					align="center"></u--text>
				<u--text text="商品详情" color="#323233" size="40" margin="20" lineHeight="36" align="center"></u--text>
				<u--text class="xiegang" text="//////" color="#969799" size="15" margin="20" lineHeight="36"
					align="center"></u--text>
			</view>
			<view class="tixing">
				<u--text text="[特别提醒]" color="#E03E2D" size="35" margin="20" lineHeight="36"></u--text>
				<u--text text="1.测试商品，仅限调试。" color="#E03E2D" size="35" margin="20" lineHeight="36"></u--text>
				<u--text text="2.下单消费，个人中心 -> 积分兑换 -> 兑换成余额进行消费。" color="#E03E2D" size="35" margin="20" lineHeight="36">
				</u--text>
				<u--text text="2.实物商品购买时需要填写收货地址，订单使用快递发货。" color="#E03E2D" size="35" margin="20" lineHeight="36">
				</u--text>
			</view>
		</view>

		<view class="imgs">
			<u--image :showLoading="true"
				src="https://dcdn.it120.cc/2022/02/04/fa78ff5e-553f-40f2-8c78-b7ab8ed8bd39.png" width="640px"
				height="640px"></u--image>
		</view>

		<view>
			<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
				<u-tabbar-item text="首页" icon="thumb-up"></u-tabbar-item>
				<u-tabbar-item text="客服" icon="chat"></u-tabbar-item>
				<u-tabbar-item text="购物车" icon="shopping-cart"></u-tabbar-item>
				<u-button text="加入购物车" color="#d9f6eD" shape="circle" size="large " @click="show3 = true" @open="open3" @close="close3"></u-button>
				<u-button text="立即购买" color="#1ba784" shape="circle" size="large " @click="show3 = true" @open="open3" @close="close3"></u-button>
			</u-tabbar>
			<!-- data -->
		</view>
		<u-popup :show="show" @open="open" @close="close" :round="10" mode="bottom" closeable
			closeIconPos="top-right">
			<view>
				<view class=""
					style="font-size: 4.73vw; text-align: center; border-bottom:1px solid #ccc; height: 80px; line-height: 80px;">
					优惠劵</view>
				<view class="" style="padding: 20px;">
					<view class="couponModule">
						<view class="number">
							<view class="money" style="margin-bottom: 1.33vw;">
								<text style="font-size: 8vw;">50</text>
								<text style="font-size: 3.2vw;">元</text>
							</view>
							<view class="condition">满50元可用</view>
						</view>
						<view class="text">
							<view class="name">满50减20</view>
							<view class="time" style="font-size: 3.2vw;color: #969799;;">
								<text>2022-04-24</text>至<text>2022-05-24</text>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="padding: 0px 40px 20px 40px;">
					<u-button class="btn3" type="success" text="确定"></u-button>
				</view>
			</view>
		</u-popup>
		
				
		<u-popup :show="show2" @open="open2" @close="close2" :round="10" mode="bottom" closeable
			closeIconPos="top-right">
			<view>
				<view class="" style="display: flex; padding: 20px;">
					<view class="">
						<u--image src="https://dcdn.it120.cc/2022/02/04/fa78ff5e-553f-40f2-8c78-b7ab8ed8bd39.png"
							width="25.6vw" height="25.6vw" style="margin: 2.67vw 2.67vw 2.67vw 0;">
						</u--image>
					</view>
					<view class="">
						<view class="bigdq">
							<view class="ziti">实物商品（购买时需填写收货地址，支持售后）</view>
						</view>
						<view class="njao">
							<view class="yuan">￥</view>
							<view class="jiamw">1.00</view>
						</view>
						<view class="jawpa">
							剩余931件
						</view>
					</view>
				</view>
				<view class="">
					<view class=""
						style="display: flex; justify-content: space-between; line-height: 8vw; padding: 0vw 20px;">
						<view class="" style="font-size: 3.73vw;">购买数量</view>
						<view class="">
							<u-number-box v-model="value" @change="valChange" buttonSize="50"></u-number-box>
						</view>
					</view>
				</view>
				<view class="" style="padding: 20px;">
					<u-button class="btn4" type="success" text="确定"></u-button>
				</view>
			</view>
		</u-popup>
				
		
		<u-popup :show="show3" @open="open3" @close="close3" :round="10" mode="bottom" closeable
			closeIconPos="top-right">
			<view>
				<view class="" style="display: flex; padding: 20px;">
					<view class="">
						<u--image src="https://dcdn.it120.cc/2022/02/04/fa78ff5e-553f-40f2-8c78-b7ab8ed8bd39.png"
							width="25.6vw" height="25.6vw" style="margin: 2.67vw 2.67vw 2.67vw 0;">
						</u--image>
					</view>
					<view class="">
						<view class="bigdq">
							<view class="ziti">实物商品（购买时需填写收货地址，支持售后）</view>
						</view>
						<view class="njao">
							<view class="yuan">￥</view>
							<view class="jiamw">1.00</view>
						</view>
						<view class="jawpa">
							剩余931件
						</view>
					</view>
				</view>
				<view class="">
					<view class=""
						style="display: flex; justify-content: space-between; line-height: 8vw; padding: 0vw 20px;">
						<view class="" style="font-size: 3.73vw;">购买数量</view>
						<view class="">
							<u-number-box v-model="value" @change="valChange1" buttonSize="50"></u-number-box>
						</view>
					</view>
				</view>
				<view class="" style="padding: 20px;">
					<u-button class="btn4" type="success" text="确定"></u-button>
				</view>
			</view>
		</u-popup>
			

	</view>
</template>




<script>
	import {
		_detail,
		_details
	} from "../../api/detail.js"
	export default {
		data() {
			return {

				id: '',
				count: 4,
				value: 2,
				detailList: [],
				list: [],
				detailLists:[],
				show: false,
				show2: false,
				show3: false,
			}
		},
		methods: {
			getDetailList() {
				_detail({
					id: this.id
				}).then(res => {
					console.log(res)
					if (res.code === 0) {
						this.detailList = res.data.basicInfo
						this.list = res.data.logistics
					}
				})
				_details({
					id: this.id
				}).then(res => {
					console.log(res)
					if (res.code === 0) {
						this.detailLists = res.data
					}
				})
			},
			fn0(){
				uni.navigateTo({
					url:"../cartB/cartB"
				})
			}
			,
			open() {
				
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			open2() {
				// console.log('open');
			},
			close2() {
				this.show2 = false
				// console.log('close');
			},
			open3() {
				// console.log('open');
			},
			close3() {
				this.show3 = false
				// console.log('close');
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			valChange1(e) {
				console.log('当前值为: ' + e.value)
			}
		},
		onReady() {

			this.getDetailList()

		},
		onLoad(option) {
			this.id = option.id
		}
	}
</script>

<style>
	.diyi {
		margin-left: 10px;
	}

	.box {
		display: inline-flex;
		margin-left: 12px;
		margin-top: 10px;
	}

	.shiwu {
		display: table;
		margin-left: 12px;
		margin-top: 50px;
	}

	.shiwu>.doushi {
		margin-top: 10px;
	}

	.yuefei {
		display: flex;
		margin-left: 12px;
		margin-top: 50px;
	}

	.fuwu {
		display: inline-flex;
		margin-left: 12px;
		margin-top: 50px;
	}

	.touxiang {
		display: flex;
		margin-left: 12px;
		margin-top: 50px;
	}

	.touxiang>.tupian {
		margin-right: 20px;
	}

	.xitong {
		margin-left: 12px;
		margin-top: 30px;
	}

	.sahangpin {
		display: flex;
		margin-top: 120px;
	}

	.sahangpin>.xieg {
		margin-left: 50px;
	}

	.sahangpin>.xiegang {
		margin-right: 50px;
	}

	.tixing {
		margin-left: 12px;
		margin-top: 50px;
	}

	.imgs {
		margin-top: 10px;
	}
	.lingjuan{
		display:flex;
		margin-left: 12px;
		margin-top: 50px;
	}
	.couponModule {
		display: flex;
		justify-content: center;
		border-radius: 5px;
		margin: 0 4vw;
		margin-bottom: 2.67vw;
	}
	
	.number {
		width: 34%;
		background-color: #fee;
		text-align: center;
		font-size: 3.2vw;
		padding: 5.33vw 0;
		color: #ff4b52;
		border-radius: 5px 0 0 5px;
	}
	
	.text {
		text-align: center;
		padding: 5.33vw 0;
		background-color: #fee;
		color: #ff4b52;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		border-radius: 0 5px 5px 0;
	}
	
	.name {
		font-size: 4.27vw;
		margin-bottom: 2.67vw;
		width: 60%;
		text-align: left;
	}
	
	.btn3 {
		height: 80px;
		line-height: 80px;
		color: #d9f6ef;
		background-color: #1ba784;
		border: 1px solid #1ba784;
		border-radius: 50px;
	}
	
	::v-deep.btn3 {
		span {
			font-size: 3.73vw;
		}
	}
	
	.ziti {
		font-size: 3.73vw;
	}
	
	.bigdq {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		flex-wrap: wrap;
		padding: 2.67vw 5.33vw 2.67vw 0;
	}
	
	.njao {
		display: flex;
		color: #1ba784;
	
		.yuan {
			font-size: 3.73vw;
			line-height: 60rpx;
		}
	
		.jiamw {
			font-size: 5.87vw;
			font-weight: 700;
		}
	}
	
	.jawpa {
		color: #969799;
	}
	
	.btn4 {
		height: 80px;
		line-height: 80px;
		color: #d9f6ef;
		background-color: #1ba784;
		border: 1px solid #1ba784;
		border-radius: 50px;
	}
</style>
